/**
 * @Description:
 * @author 紫霞
 * @since 2019/1/17
 */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Col, Row, Button, Input, Select, Modal } from 'antd'
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import PopUpSelect from 'widget/PopUpSelectnoModal/PopUpSelect'
const confirm = Modal.confirm;
const { TextArea } = Input;
const FormItem = Form.Item
const Option = Select.Option;
// 导入项目全局配置文件
import config from 'config/config'
import Uploader from 'widget/Upload'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'


//引入富文本编辑器
import styles from './activityDetailStyle.less'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);

import activity_cover_01 from '../../../assets/img/infoAndActivity/activity_cover_01.png'

import Track from 'widget/Map/Track'
import { relative } from 'path';


/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */



const formItemLayout04 = {
  labelCol: { span: 16 },
  wrapperCol: { span: 6 },
}
const formItemLayout05 = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemLayout06 = {
  labelCol: { span: 4 },
  wrapperCol: { span: 4 },
}

const routeView = function ({ dispatch, model, form }) {
  
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  // modelObj.xxx获取model中状态机的值
  let { detail, actionType, value, num } = modelObj
 
  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }
 
  //图片删除时
  function removeImgUrl(type) {
    
    
    detail[type] = ''
    console.log("11111",detail)
      dispatch({
        type: `${namespace}/updateModel`,
        payload: { detail }
      });
    
  }
  //图片增加时
  function updateImageModel(value, type) {
    
    detail[type] = value
    dispatch({
      type: `${namespace}/updateModel`,
      payload: { detail }
    });
  };


  //提交
  function submit(detail) {
    console.log("detaildetaildetail",detail);
    dispatch({
      type: `${namespace}/submit`,
      payload:{detail}
    })
  }

 
  

//input改变时执行 获取内容
function inputChange(e, title){
  console.log(e.target.value,title);
  detail[title] = e.target.value
  this.setState({
    activityRule: e.target.value
  })
}

function imgChange(detail){
  console.log("img::",detail);
  let a = num
  if(detail.posterImgUrl1 != ""){
    a--
  }
  if(detail.posterImgUrl2 != ""){
    a--
  }
  if(detail.posterImgUrl3 != ""){
    a--
  }
   console.log(a);
   num = a
  dispatch({
    type: `${namespace}/updateModel`,
    payload: { num }
  });
  
}


  
  return (
    <div className={cx('pageLayout')}>
      <div className='public_listMain'>
        <div className={"functionButton"}>
            <Button type='primary' onClick={e => submit(detail)} >保存</Button>
        </div>
        {actionType!='detail'&&
          <Form>
          <div className="boxShadow">
              <Row>
                <Col className="col" span={12}>
                 <h3>发展经纪人顶部图片:</h3><br/>
                  <FormItem
                    {...formItemLayout05}
                    extra={'图片分辨率需要为750*600,且文件大小在500kb以下，支持.jpg格式'}
                    required={true}>
                    <div className={cx('uploaderBox')}>
                      <div className={cx('uploaderDiv')}>
                        <Uploader
                          uploadedUrls={detail.topImgUrl}
                          removeFileCbf={() => { removeImgUrl('topImgUrl') }}
                          uploadSuccessCbf= {detail.topImgUrl? detail.topImgUrl:(imgUrl) => { updateImageModel(imgUrl, 'topImgUrl') }}
                          showType={'3'}
                          minCropBoxWidth={1372}
                          minCropBoxHeight={672}
                          fileType='image'
                          fileMaxSize='0.5'
                          maxFiles='1'/>
                      </div>
                    </div>
                  </FormItem>

                </Col>
              </Row>
              <Row  onChange={(e) => { imgChange(detail) }} >
              <h3 >发展经纪人海报: <span >{num}</span>/3 <span className={cx('text1')}>图片分辨率需要为750*600,且文件大小在500kb以下，支持.jpg格式</span></h3><br/>
                <Col className="col" span={4}>
                  <FormItem
                    {...formItemLayout05}
                    extra={'支持.jpg格式'}
                    required={true}>
                    <div className={cx('uploaderBox')}>
                      <div className={cx('uploaderDiv')}>
                        <Uploader
                          uploadedUrls={detail.posterImgUrl1}
                          removeFileCbf={() => { removeImgUrl('posterImgUrl1') }}
                          uploadSuccessCbf= {detail.posterImgUrl1? detail.posterImgUrl1:(imgUrl) => { updateImageModel(imgUrl, 'posterImgUrl1') }}
                          showType={'3'}
                          minCropBoxWidth={1500}
                          minCropBoxHeight={2668}
                          fileType='image'
                          fileMaxSize='0.5'
                          maxFiles='1' />
                      </div>
                    </div>
                  </FormItem>
                </Col>
                <Col className="col" span={4}>
                  <FormItem
                    {...formItemLayout05}
                    extra={'支持.jpg格式'}
                    required={true}>
                    <div className={cx('uploaderBox')}>
                      <div className={cx('uploaderDiv')}>
                        <Uploader
                          uploadedUrls={detail.posterImgUrl2}
                          removeFileCbf={() => { removeImgUrl('posterImgUrl2') }}
                          uploadSuccessCbf= {detail.posterImgUrl2? detail.posterImgUrl2:(imgUrl) => { updateImageModel(imgUrl, 'posterImgUrl2') }}
                          showType={'3'}
                          minCropBoxWidth={1500}
                          minCropBoxHeight={2668}
                          fileType='image'
                          fileMaxSize='0.5'
                          maxFiles='1' />
                      </div>
                    </div>
                  </FormItem>
                </Col>
                <Col className="col" span={4}>
                  <FormItem
                    {...formItemLayout05}
                    extra={'支持.jpg格式'}
                    required={true}>
                    <div className={cx('uploaderBox')}>
                      <div className={cx('uploaderDiv')}>
                        <Uploader
                          uploadedUrls={detail.posterImgUrl3}
                          removeFileCbf={() => { removeImgUrl('posterImgUrl3') }}
                          uploadSuccessCbf= {detail.posterImgUrl3? detail.posterImgUrl3:(imgUrl) => { updateImageModel(imgUrl, 'posterImgUrl3') }}
                          showType={'3'}
                          minCropBoxWidth={1500}
                          minCropBoxHeight={2668}
                          fileType='image'
                          fileMaxSize='0.5'
                          maxFiles='1' />
                      </div>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <br/><br/>
              <Row>
                <h3>二级经纪人活动规则</h3>
                <Col span={14}><TextArea rows={8} onChange={(e) => { inputChange(e,'activityRule') }} value={detail.activityRule} /></Col>
              </Row>
              
            </div>
        </Form>
        }
        
      </div>

     
    </div>



  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))
